<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="_meta :: header">
    <title>列表</title>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">列表</a>
            <a>
              <cite>管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="float: right;height: 30px;line-height: 30px;margin-top: 5px;" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form action="#" class="layui-form layui-col-space5" th:action="@{/vacation/vacation}" method="post">
                                    <div class="layui-inline ">
                                    <input type="text"  step="0.001" class="layui-input"  th:value="${searchInfo.userId}" name="userId" placeholder="搜索请假人编号" id="userId" />
                                    </div>
                                    <div class="layui-inline ">
                                        <select name="vacationStatus" id="vacationStatus" class="layui-input">
                                            <option value="">搜索假期状态</option>
                                            <option value="0">未开始</option>
                                            <option value="1">进行中</option>
                                            <option value="2">已开始</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline ">
                                        <select name="verifyStatus" id="verifyStatus" class="layui-input">
                                            <option value="">搜索审核状态</option>
                                            <option value="0">不准假</option>
                                            <option value="1">准假</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline ">
                                        <select name="isVerified" id="isVerified" class="layui-input">
                                            <option value="">搜索是否审核完毕</option>
                                            <option value="0">未审核</option>
                                            <option value="1">已审核</option>
                                        </select>
                                    </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn  layui-btn-success radius"><i class="layui-icon">&#xe615;</i>
                            </button>
                        </div>
                        <div class="cl pd-5 bg-1 bk-gray " >
							<span class="l">
                                <a href="javascript:;"
                                   onclick="permitAll('/vacation/vacation/permitAll')"
                                   class="layui-btn  layui-btn-success radius">
                                    <i class="layui-icon">&#xe605;</i>
                                    批量准假</a>
                                <a href="javascript:;"
                                   onclick="unPermitAll('/vacation/vacation/unPermitAll')"
                                   class="layui-btn  layui-btn-danger radius">
                                    <i class="layui-icon">&#x1006;</i>
                                    批量不准假</a>
							</span>
                            <span class="r wei-height" style="float: right;margin-right: 20px">共有数据：<strong
                                    th:text="${pageInfo.total}"></strong> 条</span>
                        </div>
                        <div class="layui-card-body" style="text-align: center">
                            <table class="layui-table layui-form">
                                <thead>
                                <tr class="text-c">
                                    <th width="25"><input type="checkbox" name="" value="" lay-filter="checkall" lay-skin="primary"/></th>
                                    <th width="25">序号</th>
                                        <th width="40">请假人编号</th>
                                        <th width="40">请假原因</th>
                                        <th width="40">开始时间</th>
                                        <th width="40">结束时间</th>
                                        <th width="40">假期状态</th>
                                        <th width="40">是否准假</th>
                                        <th width="40">是否审核完毕</th>
                                        <th width="40">提交请假时间</th>
                                        <th width="100">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="text-c" th:if="${pageInfo.list.size() == 0}">
                                    <td colspan="15"><strong>暂无数据</strong></td>
                                </tr>
                                <tr class="text-c" th:each="vacation,count:${pageInfo.list}">
                                    <td><input type="checkbox" value="1" th:value="${vacation.id}"
                                               name="id" lay-skin="primary"/></td>
                                    <td th:text="${count.count}"></td>
                                                <td th:text="${vacation.userId}"></td>
                                                <td th:text="${vacation.reason}"></td>
                                                <td th:text="${#temporals.format(vacation.startTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                                <td th:text="${#temporals.format(vacation.endTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                                <td th:if="${vacation.vacationStatus} == 0" th:text="未开始" style="color: red"></td>
                                                <td th:if="${vacation.vacationStatus} == 1" th:text="进行中" style="color: blue"></td>
                                                <td th:if="${vacation.vacationStatus} == 2" th:text="已开始" style="color: green"></td>
                                                <td th:if="${vacation.verifyStatus} ==0" th:text="不准假" style="color:red;"></td>
                                                <td th:if="${vacation.verifyStatus} ==1" th:text="准假" style="color:green;"></td>
                                                <td th:if="${vacation.isVerified} ==0" th:text="未审核" style="color:red;"></td>
                                                <td th:if="${vacation.isVerified} ==1" th:text="已审核" style="color:green;"></td>
                                                <td th:text="${#temporals.format(vacation.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td class="td-manage">
                                        <span th:if="${vacation.isVerified} ==1">已完成审核，不可再操作</span>
                                        <button th:if="${vacation.isVerified} ==0" type="button"
                                           th:onclick="'javascript:permit(\'/vacation/'+'vacation'+'/permit/'+${vacation.id}+'\')'"
                                           class="ml-5 layui-btn  layui-btn-success" >准假</button>
                                        <button th:if="${vacation.isVerified} ==0" type="button"
                                           th:onclick="'javascript:unPermit(\'/vacation/'+'vacation'+'/unPermit/'+${vacation.id}+'\')'"
                                           class="ml-5 layui-btn  layui-btn-danger" >不准假</button>
                                        <script>
                                            /*
                                            */
                                            function unPermitAll(url) {
                                                var _list = new Array();
                                                $('input[name="id"]:checked').each(
                                                    function (i) {
                                                        _list[i] = $(this).val();
                                                    });
                                                if(_list.length == 0){
                                                    layer.msg("请选择不准假的数据");
                                                    return false;
                                                }
                                                layer.confirm('确定要给选中的全部数据不准假吗？', {
                                                    btn : [ '确定', '取消' ]
                                                    // 按钮
                                                }, function() {
                                                    $.ajax({
                                                        url:url,// 跳转到 action
                                                        data:JSON.stringify(_list),
                                                        type:'post',
                                                        cache:false,
                                                        dataType:'json',
                                                        contentType:"application/json",  //发送信息至服务器时内容编码类型。
                                                        success:function(data) {
                                                            if(data.code == "1"){
                                                                layer.msg('操作成功!',{icon:1,time:1000,end:function() {
                                                                        window.location.reload();
                                                                    }});
                                                            }else{
                                                                selfmsg('操作失败!');
                                                            }
                                                        },
                                                        error:function() {
                                                            selfmsg('操作异常!',5);
                                                        },
                                                    });
                                                }, function() {

                                                });
                                            }

                                            /*
                                            */
                                            function permitAll(url) {
                                                var _list = new Array();
                                                $('input[name="id"]:checked').each(
                                                    function (i) {
                                                        _list[i] = $(this).val();
                                                    });
                                                if(_list.length == 0){
                                                    layer.msg("请选择准假的数据");
                                                    return false;
                                                }
                                                layer.confirm('确定要给选中的全部数据准假吗？', {
                                                    btn : [ '确定', '取消' ]
                                                    // 按钮
                                                }, function() {
                                                    $.ajax({
                                                        url:url,// 跳转到 action
                                                        data:JSON.stringify(_list),
                                                        type:'post',
                                                        cache:false,
                                                        dataType:'json',
                                                        contentType:"application/json",  //发送信息至服务器时内容编码类型。
                                                        success:function(data) {
                                                            if(data.code == "1"){
                                                                layer.msg('操作成功!',{icon:1,time:1000,end:function() {
                                                                        window.location.reload();
                                                                    }});
                                                            }else{
                                                                selfmsg('操作失败!');
                                                            }
                                                        },
                                                        error:function() {
                                                            selfmsg('操作异常!',5);
                                                        },
                                                    });
                                                }, function() {

                                                });
                                            }

                                            /*
                                                不准假
                                             */
                                            var unPermit = function (url) {
                                                layer.confirm('确认不准假吗？',function(index){
                                                    $.ajax({
                                                        type: 'GET',
                                                        url: url,
                                                        dataType: 'json',
                                                        success: function(data){
                                                            if(data.code == "1"){
                                                                layer.msg('操作成功!',{icon:1,time:1000,end:function(){
                                                                        window.location.reload();
                                                                    }});
                                                            }else{
                                                                layer.msg(data.msg);
                                                            }
                                                        },
                                                        error:function() {
                                                            layer.msg('操作异常!请联系管理员处理',5);
                                                        },
                                                    });
                                                });
                                            };
                                            /*
                                                准假
                                             */
                                            var permit = function (url) {
                                                layer.confirm('确认准假吗？',function(index){
                                                    $.ajax({
                                                        type: 'GET',
                                                        url: url,
                                                        dataType: 'json',
                                                        success: function(data){
                                                            if(data.code == "1"){
                                                                layer.msg('操作成功!',{icon:1,time:1000,end:function(){
                                                                        window.location.reload();
                                                                    }});
                                                            }else{
                                                                layer.msg(data.msg);
                                                            }
                                                        },
                                                        error:function() {
                                                            layer.msg('操作异常!请联系管理员处理',5);
                                                        },
                                                    });
                                                });
                                            };
                                        </script>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div th:include="_pagination :: page"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--_footer 作为公共模版分离出去-->
<div th:replace="_footer :: footerjs">
</div>
<!--/_footer 作为公共模版分离出去-->
<script>
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var form = layui.form;
        $("#vacationStatus").val([[${searchInfo.vacationStatus}]]);
        $("#verifyStatus").val([[${searchInfo.verifyStatus}]]);
        $("#isVerified").val([[${searchInfo.isVerified}]]);
        form.render();



        // 监听全选
        form.on('checkbox(checkall)', function(data){

            if(data.elem.checked){
                $('tbody input').prop('checked',true);
            }else{
                $('tbody input').prop('checked',false);
            }
            form.render('checkbox');
        });
        form.on('select(selectchange)', function(data){
            console.log(data.value); //得到被选中的值
            var pageNo = $('#pageNo');
            var Form = $('form')
            pageNo.val(1);
            Form.submit();
            form.render('select');
        });
        //日期时间范围选择
        laydate.render({

        });
        lay('.timeSpace').each(function(){
            laydate.render({
                elem: this
                ,type: 'datetime'
                ,range: true //或 range: '~' 来自定义分割字符
            });
        });
    });


</script>
</body>
</html>